<template>
  <div class="box">
    <div class="header">
      <input
        @keydown.enter="searchChange"
        type="text"
        v-model="searchText"
        placeholder="请搜索"
      />
    </div>
    <div class="content">
      <div class="aside">
        <ul>
          <li
            :class="{ active: flagIsSHOW == i }"
            @click="addIndex(v, i)"
            v-for="(v, i) in navList"
            :key="i"
          >
            {{ v.name }}
          </li>
        </ul>
      </div>
      <div class="rightBox">
        <div class="banner">
          <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
              <img :src="image" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="list">
          <div @click="ToastMsg" v-for="(v, i) in asideObj" :key="i" class="card">
            <img :src="v.icon" alt="" />
            <span>{{v.name}}</span>
          </div>
        </div>
        <br />
        <br />
        <br />
      </div>
    </div>
  </div>
</template>

<script>
import { classify } from "@/api/user.js";
import { ref } from "vue";
import { Toast } from "vant";
export default {
  setup() {
    let asideObj = ref([]);
    let flagIsSHOW = ref(-1);
    let searchText = ref("");
    let navList = ref([
      {
        name: "所有分类",
        id: "",
      },
      {
        name: "居家",
        id: "jujia2",
      },
      {
        name: "配件装饰",
        id: "peishi2",
      },
      {
        name: "服装",
        id: "fuzhuang",
      },
      {
        name: "电器",
        id: "dianqi2",
      },
    ]);
    const images = [
      "http://39.105.231.166:7002/static/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20191013183855.c78e2c4.jpg",
      "http://39.105.231.166:7002/static/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20191013185220.2acdd0f.jpg",
    ];

    classify().then((res) => {
      asideObj.value = res;
      console.log(res);
    });

    function ToastMsg () {
       Toast.success(`暂无商品数据`);
    }

    // 分类商品
    function addIndex(v, i) {
      flagIsSHOW.value = i;
      if (v.id == "") {
        classify().then((res) => {
          asideObj.value = res;
          console.log(res);
        });
      } else {
        classify().then((res) => {
          asideObj.value = res.filter((item) => {
            return item.type == v.id;
          });
          console.log(asideObj.value);
        });
      }
    }

    // 搜索
    function searchChange() {
      console.log(searchText.value);
      classify().then((res) => {
        asideObj.value = res.filter((item) => {
          return item.name.includes(searchText.value);
        });
      });
    }

    return {
      images,
      asideObj,
      navList,
      addIndex,
      flagIsSHOW,
      searchText,
      searchChange,
      ToastMsg
    };
  },
};
</script>

<style lang="scss" scoped>
.active {
  border-left: 5px solid #d41515 !important;
  color: #d41515;
}
.aside {
  ul {
    width: 100%;
    li {
      font-size: 28px;
      width: 95%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      border-left: 5px solid transparent;
    }
  }
}

.banner {
  width: 100%;
  height: 350px;
  padding: 40px;
  img {
    width: 100%;
    height: 270px;
    flex-shrink: 0;
    border-radius: 20px;
  }
}
.list {
  display: flex;
  flex-wrap: wrap;

  .card {
    width: 30%;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 13px;
    margin-bottom: 10px;
    img {
      width: 100%;
      height: 80%;
    }
    span {
      font-size: 24px;
      text-align: center;
    }
  }
}
.content {
  display: flex;
  width: 100%;
  position: relative;

  .aside {
    height: 93%;
    width: 25%;
    border-right: 1px solid rgb(218, 215, 215);
    position: fixed;
    left: 0;
    bottom: 0;
  }
  .rightBox {
    width: 75%;
    height: 100%;
    background-color: red;
    position: absolute;
    right: 0;
    top: 60px;
  }
}
.header {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(219, 217, 217);
  padding-left: 30px;
  position: fixed;
  z-index: 9;
  background-color: #fff;
  top: 0;
  left: 0;
  input {
    width: 70%;
    background-color: #f5f5f5;
    height: 45px;
    border: 0;
    border-radius: 25px;
    font-size: 24px;
    padding-left: 20px;
  }
}

.box {
  height: 2600px;
  background-color: #fff;
  width: 100%;
}
</style>
